<template>
  <div class="articalList">
    <van-nav-bar title="文章列表" left-arrow @click-left="onClickLeft" fixed />
    <div class="list" v-if="dataList&&dataList.length>0">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ul>
          <li @click="toArtical(item.id)" v-for="(item,index) in dataList" :key="index">
            <div class="pic">
              <img :src="item.img" alt />
            </div>
            <div class="info">
              <div class="title">{{item.title}}</div>
              <div class="time">{{item.create_time|changeNum|formatDate("yyyy-MM-dd hh:mm")}}</div>
              <div class="text">{{item.content}}</div>
            </div>
          </li>
        </ul>
      </van-list>
    </div>
    <div class="empty" v-else>暂无文章</div>
    <div v-if="showBind">
      <bindPhone :uid="false" :activity_id="false"></bindPhone>
    </div>
  </div>
</template>
<script>
import vuefilter from "../common/vuefilter.js";
export default {
  name: "articalList",
  filters: {
    formatDate: vuefilter.formatDate,
    changeNum: vuefilter.changeNum
  },
  data() {
    return {
      showBind: false,
      dataList: {},
      pageNum: 1,
      pageList: [],
      uid: "",
      isLoading: false,
      loading: false,
      finished: false
    };
  },
  mounted() {
    this.uid = this.$route.query.uid;
    this.getList();
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    //跳往文章详情
    toArtical(id) {
      if (this.$cookies.get("first_login")!=0) {
        this.showBind = true;
        return;
      }
      this.$router.push({
        path: "/artical",
        query: {
          id:id,
          uid:this.uid,
        }
      });
    },
    async getList() {
      let params = {
        token: this.$cookies.get("token"),
        user_id: this.uid,
        page: this.pageNum
      };
      const res = await this.$axios.post(this.$api.getArticleList, params);
      if (res.code == 1) {
        this.dataList = res.data;
        this.pageList = this.pageList.concat(this.dataList);
        this.dataList = this.pageList;
        this.isLoading = false;
        this.loading = false;
      } else {
        this.$message({
          message: "获取文章列表失败：" + res.msg,
          type: "error"
        });
      }
    },
    //上拉加载
    onLoad() {
      this.pageNum++;
      if (this.pageNum <= this.dataList.pageAll) {
        this.getList();
      } else {
        this.loading = false;
        this.finished = true;
      }
    }
  }
};
</script>
<style scoped>
.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 0.4rem;
  color: #ccc;
}
.articalList {
  min-height: 100vh;
  background: #fff;
  padding-top: 0.46rem;
}
.list li {
  display: flex;
  padding: 0.1rem 0.15rem;
}
.list li .pic img {
  width: 0.8rem;
  height: 0.8rem;
}
.list li .info {
  padding-left: 0.1rem;
  display: flex;
  flex: auto;
  flex-direction: column;
  width: calc(100% - 0.8rem);
}
.list li .info .title {
  font-size: 0.15rem;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.list li .info .time {
  font-size: 0.12rem;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(94, 94, 94, 1);
  margin-top: 0.07rem;
}
.list li .info .text {
  font-size: 0.12rem;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 0.1rem;
}
</style>


